import VirtualServiceView from '@/pages/Devops/AppRoute/virtualServiceView';
import { DrawerForm, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import React from 'react';
import {Tag} from "antd";

const Index: React.FC = () => {
  const [open, setOpen] = React.useState(false);
  const [vsRow, setVsRow] = React.useState<any>();

  const routesColumn: ProColumns<Record<string, any>, 'text'>[] = [
    {
      dataIndex: ['metadata', 'name'],
      title: '名称',
    },
    {
      title: '绑定网关',
      render: (_, record: Record<string, any>) => {
        return record.spec.gateways ? (
          <div style={{ whiteSpace: 'pre-line' }}>{record.spec.gateways.join('\n')}</div>
        ) : (
          '-'
        );
      },
    },
    {
      title: '主机名',
      render: (_, record: Record<string, any>) => {
        return record.spec.hosts ? (
          <div style={{ whiteSpace: 'pre-line' }}>{record.spec.hosts.join('\n')}</div>
        ) : (
          '-'
        );
      },
    },

    {
      dataIndex: 'action',
      title: '操作',
      render: (_, record: Record<string, any>) => {
        return [
          <a key={'route'} onClick={() =>{
            console.log(record)
            setVsRow(record)
            setOpen(true)
          }}>
            查看路由
          </a>,
        ];
      },
    },
  ];

  const dataSource = [
    {
      "apiVersion": "networking.istio.io/v1alpha3",
      "kind": "VirtualService",
      "metadata": {
        "name": "complex-route"
      },
      "spec": {
        "hosts": [
          "myapp.example.com"
        ],
        "http": [
          {
            "name": "v1-route",
            "match": [
              {
                "uri": {
                  "prefix": "/api/v1"
                },
                "headers": {
                  "x-version": {
                    "exact": "v1"
                  },
                  "x-platform": {
                    "regex": "ios|android"
                  }
                },
                "queryParams": {
                  "debug": {
                    "exact": "true"
                  }
                },
                "method": "GET"
              },
              {
                "uri": {
                  "prefix": "/api/v2"
                },
                "headers": {
                  "x-version": {
                    "exact": "v1"
                  },
                  "x-platform": {
                    "regex": "ios|android"
                  }
                },
                "queryParams": {
                  "debug": {
                    "exact": "true"
                  }
                },
                "method": "GET"
              }
            ],
            "route": [
              {
                "destination": {
                  "host": "v1-service",
                  "subset": "stable"
                }
              }
            ]
          },
          {
            "name": "v2-canary",
            "match": [
              {
                "uri": {
                  "exact": "/api/v2/users"
                },
                "headers": {
                  "x-canary": "true"
                },
                "sourceLabels": {
                  "app": "frontend"
                },
                "ignoreUriCase": true
              }
            ],
            "route": [
              {
                "destination": {
                  "host": "v2-service",
                  "subset": "canary"
                },
                "weight": 20
              },
              {
                "destination": {
                  "host": "v1-service",
                },
                "weight": 80
              }
            ]
          }
        ]
      }
    }
  ];

  const demoVirtualService = {
    spec: {
      http: [
        {
          match: [{ uri: { prefix: '/api' } }],
          route: [
            { destination: { host: 'v1-service', subset: 'v1' }, weight: 90 },
            { destination: { host: 'v2-service', subset: 'v2' }, weight: 10 },
          ],
        },
        {
          match: [{ headers: { env: { exact: 'prod' } } }],
          route: [{ destination: { host: 'v2-service' }, weight: 100 }],
          timeout: '2s',
        },
      ],
    },
  };

  return (
    <PageContainer>
      <ProTable search={false} columns={routesColumn} dataSource={dataSource} />

      {vsRow && (
        <DrawerForm
          title={'路由详情'}
          open={open}
          onOpenChange={setOpen}
          drawerProps={{
            width:'40%',
            destroyOnClose: true,
            onClose: ()=>setVsRow(null)
          }}
        >
          <VirtualServiceView vs={vsRow} />
        </DrawerForm>
      )}
    </PageContainer>
  );
};
export default Index;
